<template>
  <a-modal
    v-model="visible"
    title="修改组排序"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    centered
    @ok="submit"
  >
    <a-form-model ref="form" :model="form" :rules="rules" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
      <a-form-model-item label="调整前排序">
        <span>第</span>
        <span>{{ oldSort }}</span>
        <span>组</span>
      </a-form-model-item>
      <a-form-model-item label="调整后排序" prop="newSort">
        <span>第 </span>
        <a-input-number v-model="form.newSort" :min="1" :precision="0" />
        <span> 组</span>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      confirmLoading: false,
      oldSort: 1,
      form: {
        newSort: ''
      },
      rules: {
        newSort: [{ required: true, message: '请输入序号', trigger: 'change' }]
      }
    }
  },
  methods: {
    openModel(index) {
      this.oldSort = index
      this.visible = true
    },
    closeModel() {
      this.form.newSort = ''
      this.visible = false
    },
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$emit('submit', { ...this.form, oldSort: this.oldSort })
          this.closeModel()
        }
      })
    }
  }
}
</script>

<style></style>
